<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getMedicalOrderLogistics } from '@/api/order'
  import type { ExpressData } from '@/type/order'
  import { ref } from 'vue'
  // #ifdef H5

  import AMapCom from './components/AMapCom.vue'
  // #endif
  // #ifdef MP-WEIXIN

  import TXMapCom from './components/TXMapCom.vue'
  // #endif

  function onBackClick() {
    uni.navigateBack({ delta: 1 })
  }

  // 1. 查询物流详情
  // 获取地址参数
  const pageParams = defineProps<{ id: string }>()
  // 当前位置
  const logisticsInfo = ref({} as ExpressData)

  // 查看物流信息
  const getLogistics = async () => {
    // 调用接口
    const data = await getMedicalOrderLogistics(pageParams.id)
    // 渲染数据
    logisticsInfo.value = data
  }
  // 获取物流信息
  getLogistics()
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <!-- #ifdef H5 -->

    <AMapCom v-if="logisticsInfo.logisticsInfo" :logisticsInfo="logisticsInfo" />
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <TXMapCom v-if="logisticsInfo.logisticsInfo" :logisticsInfo="logisticsInfo" />
    <!-- #endif -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ logisticsInfo.estimatedTime }} 送达
        {{ logisticsInfo.name }}
        {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <!-- 1已发货 2已揽件 3 运输中 4 派送中 5已签收 -->
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-else-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-else-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
